<template>
	<view class="address">
		<view class="header">
			<text class="title">收货地址</text>
			<text class="add-btn" @click="addAddress">+ 新增地址</text>
		</view>
		
		<view class="address-list">
			<view v-if="addressList.length === 0" class="empty-state">
				<image class="empty-image" src="/static/muyuadmin/NoCard_3.png" mode="aspectFit"></image>
				<text class="empty-text">暂无收货地址</text>
				<button class="add-first-btn" @click="addAddress">添加地址</button>
			</view>
			
			<view v-else class="address-items">
				<view 
					v-for="address in addressList" 
					:key="address.id"
					class="address-item"
					:class="{ default: address.isDefault }"
					@click="selectAddress(address)"
				>
					<view class="address-content">
						<view class="address-header">
							<text class="name">{{ address.name }}</text>
							<text class="phone">{{ address.phone }}</text>
							<text v-if="address.isDefault" class="default-tag">默认</text>
						</view>
						<view class="address-detail">
							<text>{{ address.province }}{{ address.city }}{{ address.district }}{{ address.detail }}</text>
						</view>
					</view>
					<view class="address-actions">
						<view class="action-item" @click.stop="setDefault(address.id)">
							<text class="action-icon">⭐</text>
							<text class="action-text">设为默认</text>
						</view>
						<view class="action-item" @click.stop="editAddress(address)">
							<text class="action-icon">✏️</text>
							<text class="action-text">编辑</text>
						</view>
						<view class="action-item" @click.stop="deleteAddress(address.id)">
							<text class="action-icon">🗑️</text>
							<text class="action-text">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view v-if="addressList.length > 0" class="bottom-actions">
			<button class="manage-btn" @click="manageAddresses">管理地址</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const addressList = ref([
	{
		id: 1,
		name: '张三',
		phone: '138****8888',
		province: '北京市',
		city: '北京市',
		district: '朝阳区',
		detail: '建国路88号SOHO现代城A座1001室',
		isDefault: true
	},
	{
		id: 2,
		name: '李四',
		phone: '139****9999',
		province: '上海市',
		city: '上海市',
		district: '浦东新区',
		detail: '陆家嘴环路1000号上海中心大厦',
		isDefault: false
	},
	{
		id: 3,
		name: '王五',
		phone: '136****6666',
		province: '广东省',
		city: '深圳市',
		district: '南山区',
		detail: '科技园南区腾讯大厦',
		isDefault: false
	}
])

const addAddress = () => {
	uni.navigateTo({
		url: '/pages_my/address/edit'
	})
}

const selectAddress = (address) => {
	// 如果是选择地址模式，返回选择的地址
	const pages = getCurrentPages()
	const prevPage = pages[pages.length - 2]
	// if (prevPage && prevPage.route.includes('submitOrder')) {
		uni.$emit('addressSelected', address)
		uni.navigateBack()
	// }
}

const setDefault = (addressId) => {
	addressList.value.forEach(address => {
		address.isDefault = address.id === addressId
	})
	uni.showToast({
		title: '设置默认地址成功',
		icon: 'success'
	})
}

const editAddress = (address) => {
	uni.navigateTo({
		url: `/pages_my/address/edit?id=${address.id}`
	})
}

const deleteAddress = (addressId) => {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这个地址吗？',
		success: (res) => {
			if (res.confirm) {
				addressList.value = addressList.value.filter(address => address.id !== addressId)
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
			}
		}
	})
}

const manageAddresses = () => {
	uni.showToast({
		title: '地址管理功能',
		icon: 'none'
	})
}
</script>

<style scoped>
.address {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.add-btn {
	font-size: 28rpx;
	color: #667eea;
	padding: 15rpx 25rpx;
	background: #f0f3ff;
	border-radius: 20rpx;
}

.address-list {
	flex: 1;
}

.empty-state {
	background: white;
	border-radius: 16rpx;
	padding: 100rpx 30rpx;
	text-align: center;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	display: block;
	margin-bottom: 40rpx;
}

.add-first-btn {
	background: #ff6b6b;
	color: white;
	border: none;
	border-radius: 25rpx;
	padding: 20rpx 50rpx;
	font-size: 28rpx;
}

.address-items {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.address-item {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
}

.address-item.default {
	border-left: 8rpx solid #ff6b6b;
}

.address-content {
	margin-bottom: 25rpx;
}

.address-header {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 15rpx;
}

.name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.phone {
	font-size: 26rpx;
	color: #666;
}

.default-tag {
	background: #ff6b6b;
	color: white;
	font-size: 20rpx;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
}

.address-detail {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
}

.address-actions {
	display: flex;
	justify-content: space-around;
	border-top: 1rpx solid #f0f0f0;
	padding-top: 25rpx;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.action-icon {
	font-size: 32rpx;
}

.action-text {
	font-size: 22rpx;
	color: #666;
}

.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 25rpx 30rpx;
	border-top: 1rpx solid #eee;
}

.manage-btn {
	background: #667eea;
	color: white;
	border: none;
	border-radius: 25rpx;
	padding: 25rpx;
	font-size: 28rpx;
	font-weight: bold;
	width: 100%;
}
</style>